<template>
	<view class="goods-show-box">
		<view class="goods-detail-all-box" v-if="isShow">
			<view :style="{'opacity': opacity,'display':opacity == 0 ? 'none':'block','height':CustomBar+'px'}" style="position: fixed;width: 100%;top: 0;z-index: 55;">
				<cu-custom bg-color="bg-gradual-red" :is-back="true">
					<view slot="content" class="bar-content">
						<text class="bar-text">商品详情</text>
					</view>
					<view slot="right" class="tar-right">
						<u-icon name="star-fill" color="#ffffff" size="32" v-if="isCollection == 0" @tap="onCollectionChange(1)"></u-icon>
						<u-icon name="star" color="#ffffff" size="32" v-if="isCollection == 1" @tap="onCollectionChange(0)"></u-icon>
						<u-icon name="share-fill" color="#ffffff" size="32" :custom-style="{'paddingLeft':'20rpx'}" @tap="onShare"></u-icon>
						<!--  在小程序模式下使用官方分享按钮  -->
						<!-- #ifdef MP -->
						<button open-type="share" class="top-share-btn"></button>
						<!-- #endif -->
					</view>
				</cu-custom>
			</view>

			<!--  轮播图开始  -->
			<view class="swiper-box" id="swiper-detail">
				<swiper class="swiper" style="position: relative;" :current="swiperIndex" :indicator-dots="false" :autoplay="false"
				 indicator-color="#ffffff" indicator-active-color="#e54d42" :duration="500" @change="changeSwiperInd">
					<swiper-item v-for="(item,index) in bannerList" :key="index">
						<view class="sw">
							<image class="swiper-img" :src="item" mode="scaleToFill"></image>
						</view>
					</swiper-item>

				</swiper>
				<view class="swiper-index">
					<text class="index-text">
						{{(swiperIndex + 1) + '/' + bannerList.length}}
					</text>
				</view>
				<view class="black-box" style="z-index: 99999;">
					<text class="iconfont iconfanhui icon-back" @tap="topBack"></text>
				</view>
			</view>
			<!--  轮播图end  -->

			<!--  商品价格  -->
			<view class="goods-name-box">
				<view class="goods-name">
					{{goodsDetail.goodsName}}
				</view>

				<view class="goods-price-box">
					<view class="goods-price">
						<text class="text">￥{{goodsDetail.price}}</text>
						<text class="text-del">
							原价:
							<text>￥{{goodsDetail.marketPrice}}</text>
						</text>
					</view>
					<view class="goods-collection">
						<u-icon name="star" color="#999999" size="36" @tap="onCollectionChange(0)" v-if="isCollection == 1"></u-icon>
						<u-icon name="star-fill" color="#F43530" size="36" @tap="onCollectionChange(1)" v-if="isCollection == 0"></u-icon>
						<view class="collection">{{isCollection == 0 ? '已':''}}收藏</view>
					</view>
				</view>

				<view class="goods-bottom">
					<view class="bottom-item">
						销量:{{goodsDetail.salesNum}}
					</view>
					<view class="bottom-item">
						收藏:{{goodsDetail.collectNum}}
					</view>
				</view>
			</view>
			<!--  商品价格end  -->

			<view class="poster-box" @tap="onShare">
				<!-- #ifdef MP -->
				<button open-type="share" class="share-btn"></button>
				<!-- #endif -->
				<view class="poster-l">
					<u-icon name="level" color="#F43530" size="36"></u-icon>
					<text class="poster-text">分享给朋友,与朋友共享优惠吧</text>
				</view>
				<view class="poster-r">
					<u-icon name="share-fill" color="#F43530" size="36"></u-icon>
				</view>
			</view>

			<!--  店铺信息  -->
			<view class="shop-info-box">
				<view class="info-left" @tap="navShop">
					<image :src="goodsDetail.storeLogo" class="shop-logo"></image>
				</view>
				<view class="info-content" @tap="navShop">
					<view class="shop-name">
						{{goodsDetail.storeName}}
					</view>
					<view class="shop-addr">
						北京市海淀区苏家坨乡前沙润村北京市海淀区苏家坨乡前沙润村
					</view>
				</view>
				<view class="info-right" @tap="navigationGo">
					<u-icon name="map" color="#888888" size="36"></u-icon>
					<view>
						导航
					</view>
				</view>
			</view>
			<!--  店铺信息 end  -->

			<!--  优惠券列表  -->
			<view>
				<u-cell-group>
					<u-cell-item title="满减" value="满100减50" :title-style="{'fontSize':'28rpx','color':'#888888'}" hover-class="cell-hover-class"
					 :arrow="false"></u-cell-item>
					<u-cell-item title="优惠券" value="领取优惠券" :title-style="{'fontSize':'28rpx','color':'#888888'}" hover-class="cell-hover-class"
					 @tap="discountShow = true"></u-cell-item>
				</u-cell-group>
			</view>
			<!--  优惠券列表end  -->


			<!--  商品评论  -->
			<view class="goods-comment-box" id="goodsCommit">
				<view class="comment-text">
					商品评价<text class="comment-num">({{evalTotal}})</text>
					<text class="commit-more" v-if="evalTotal>1">查看更多</text>
				</view>
				<view class="comment-list-box">
					<view class="comment-pad" v-for="(item,index) in evalList" :key="index">
						<comment-list></comment-list>
					</view>
				</view>
			</view>
			<!--  商品评论end  -->

			<!--   商品详情图片  -->

			<view class="goods-img-detail" id="goodsDetail">
				<u-divider color="#666666">商品详情</u-divider>
				<view style="padding-top: 40rpx;" class="rich-box">
					<rich-text :nodes="goodsDetail.goodsDesc"></rich-text>
				</view>
			</view>

			<!--   商品详情图片end  -->


			<u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>

			<u-top-tips ref="uTips"></u-top-tips>

			<!--   优惠券弹窗   -->
			<u-popup v-model="discountShow" border-radius="20" mode="bottom" length="60%">
				<view class="dis-box-scoll">
					<view class="item-box" v-for="item in 10" :key="item" @tap="prefSelect(item)">
						<preferential-item></preferential-item>
					</view>
				</view>
			</u-popup>
			
			<!--  底部的购买导航栏  -->
			<view class="buy-box">
				<view class="buy-warp">
					<view class="buy-left">
						<view class="buy-icon" @tap="goToPage('/pages/index/index')">
							<text class="iconfont iconhome"></text>
						</view>
						<view class="buy-icon" @tap="goToPage('/pages/index/cart')">
							<text class="iconfont icongouwuche"></text>
						</view>
					</view>
					<view class="buy-right" v-if="goodsDetail.isBuy">
						<view class="buy-buttom cart-btn" @tap="btnShowSku(0)">
							加入购物车
						</view>
						<view class="buy-buttom buy-btn" @tap="btnShowSku(1)">
							立即购买
						</view>
					</view>
				</view>
			</view>
			<!--  底部的购买导航栏end  -->
			
			
			<l-sku ref="sku" :img="skuImg" @specSelectOk="sepcSelectSubmit" :specList="skuList" :specTree="skuTree" :price="skuPrice" :stock="skuStock"></l-sku>
			
			
			
		</view>


		

		<l-loading v-if="!isShow"></l-loading>

	</view>
</template>

<script>
	import commentList from "@/components/comment-list.vue"
	import preferentialItem from "@/components/preferential-item.vue"
	import lLoading from "@/components/loading.vue"
	import lSku from "@/components/sku.vue"
	import {mapState} from "vuex"
	import {hasLogin} from "../../utils/hasLogin.js"
	export default {
		name: "detail",
		data() {
			return {
				content: '',
				
				isShow:false,
				goodsDetail: {},
				
				/*  sku的数据  */
				skuImg:"",
				skuList:[],
				skuTree:[],
				skuPrice:'0',
				skuStock:0,
				/* sku数据结束 */
				
				/*  评论列表  */
				evalList:[],
				evalTotal:0,
				/* 评论列表数据end */
				
				goodsId: null,
				//scroll滚动位置
				scrollTop: 0,
				buyType:0,/*  是加入购物车还是立即购买 0是购物车 1是立即购买  */
				//  轮播图的高度 用来计算什么时候顶部导航栏显示 
				swiperPosition: 250,

				/*  顶部标题栏高度  */
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,

				/*  顶部栏透明度  */
				opacity: 0,
				/*  轮播图的index  */
				swiperIndex: 0,
				/*  标题栏选中第几个  */
				barSelect: 1,

				/*  当前的收藏状态  0 是 1否 */
				isCollection: 1,

				/*  满减优惠弹窗  */
				discountShow: false,

				bannerList: [],
			}
		},
		computed:{
			...mapState("user",['userInfo'])
		},
		methods: {

			navShop(){
				uni.navigateTo({
					url:"/pages/shop/index"
				})
			},

			/*  点击优惠卷的时候  */
			prefSelect(item) {
				console.log(item)
			},

			/*  选着规格的时候点击确定按钮  */
			sepcSelectSubmit(item){
				let has  = hasLogin()
				if(has){
					this.$refs.sku.closeSku()
					let data = {
						goodsId:this.goodsId,
						goodsNum:item.buyNum
					}
					if(!item.hasOwnProperty("isSku")){
						data.skuId = item.id
					}
					/* 判断是否是加入购物车操作 */
					if(this.buyType == 0){
						this.getAddCart(data)
					}else{
						data.cardId = "none"
						data = JSON.stringify(data)
						uni.navigateTo({
							url:"/pages/order/confirm?data=" + data
						})
					}
				}
			},
			
			
			/*  点击立即购买个加入购物的时候  */
			btnShowSku(type){
				this.buyType = type
				this.$refs.sku.showSku()
			},
			
			/*点击收藏按钮的时候 */
			onCollectionChange(type) {
				let has = hasLogin()
				if(has){
					let apiName = type == 0 ? 'isCollect':'noCollect'
					/*  调用商品收藏接口  */
					let data = {goodsId:this.goodsId,storeId:this.goodsDetail.storeId}
					this.$ajax(apiName,data).then((res)=>{
						if(res.code>=0){
							this.isCollection = type
						}
					}).catch((err)=>{
						
					})
					
				}
			},

			/*点击导航的时候 */
			navigationGo() {
				this.$refs.uTips.show({
					title: '功能正在维护中...',
					type: 'warning',
				})
			},

			/* 点击购买栏的按钮进行导航的时候*/
			goToPage(url) {
				uni.switchTab({
					url: url
				})
			},



			/*  点击分享  */
			onShare() {
				// #ifdef H5
				let tag = document.createElement('input');
				tag.setAttribute('id', 'cp_hgz_input');
				tag.value = location.href;
				document.getElementsByTagName('body')[0].appendChild(tag);
				document.getElementById('cp_hgz_input').select();
				document.execCommand('copy');
				document.getElementById('cp_hgz_input').remove();
				this.$refs.uTips.show({
					title: '复制成功',
					type: 'success',
					duration: '3000'
				})
				// #endif
			},

			/*  轮播图的index改变  */
			changeSwiperInd(e) {
				this.swiperIndex = e.detail.current
			},
			/*  点击顶部返回按钮  */
			topBack() {
				uni.navigateBack({
					delta: 1,
				});
			},

			/*  添加购物车  */
			getAddCart(data){
				this.$ajax("addCart",data).then((res)=>{
					if(res.code>=0){
						uni.showToast({
							title:"添加购物车成功",
							icon:"none",
							duration:1500
						})
					}
				}).catch((err)=>{
					
				})
			},

			/*   获取商品详情   */
			getGoodsDetail() {
				// 1320611900370714624
				let data = {
					'id': this.goodsId
				}
				this.isShow = false
				this.$ajax('goodsInfo', data).then((res) => {
					if (res.code >= 0) {
						this.isShow = true
						let goods = res.data.goodsInfo
						this.goodsDetail = goods
						this.isCollection = goods.goodsIsFavorite == 'F' ? 1 : 0
						this.bannerList = goods.imgs.split(",")
						this.$nextTick(()=>{
							this.skuImg = goods.img
							this.skuList = goods.skuListMap
							this.skuTree = goods.skuVOList
							this.skuPrice = goods.price
							this.skuStock = goods.num
						})
						uni.setNavigationBarTitle({
							title: goods.goodsName
						});
					}
				}).catch((err) => {

				})

			},
			
			/*  获取评价列表  */
			getCommentList(){
				let data = {goodsId:this.goodsId}
				this.$ajax("oneCommentList",data).then((res)=>{
					if(res.code>=0){
						this.evalTotal = res.data.total
						this.evalList = res.data.list
					}
				}).catch((err)=>{
					
				})
			}
			
		},



		onReady() {
			
		},

		onLoad(e) {
			this.isShow = false
			if (!e.id) {
				let pages = getCurrentPages()
				if (pages.length <= 1) {
					uni.switchTab({
						url: "/pages/index/index"
					})
				} else {
					uni.navigateBack({
						delta: 1
					})
				}

				return false
			}
			this.goodsId = e.id
			this.getGoodsDetail()
			this.getCommentList()
		},

		/*  下拉刷新  */
		onPullDownRefresh() {
			let t = setTimeout(() => {
				uni.stopPullDownRefresh()
				clearTimeout(t)
			}, 2000)
		},



		/*  页面滚动位置  */
		onPageScroll(e) {
			let sc = e.scrollTop
			this.scrollTop = sc
			/*  判断滚动距离大于顶部栏的高度时才会显示  */
			if (sc >= this.CustomBar) {
				let op = (sc / this.swiperPosition).toFixed(2)
				if (op > 1) {
					this.opacity = 1
				} else {
					this.opacity = op
				}
			} else if (sc < this.CustomBar) {
				this.opacity = 0
			}
		},

		/*  在小程序内的分享  */
		onShareAppMessage() {
			let path = `/pages/goods/detail?id=${this.goodsDetail.goodsSortNo}`
			let name = this.goodsDetail.goodsName
			let img = this.goodsDetail.img
			return {
				title: name,
				path: path,
				imageUrl: img
			}
		},


		/**
		 * 用户点击右上角分享到朋友圈
		 */
		onShareTimeline: function() {
			let path = `/pages/goods/detail?id=${this.goodsDetail.goodsSortNo}`
			let name = this.goodsDetail.goodsName
			let img = this.goodsDetail.img
			return {
				title: name,
				path: path,
				imageUrl: img
			}
		},


		components: {
			commentList,
			preferentialItem,
			lLoading,
			lSku
		},
	}
</script>

<style scoped src=".../../assets/css/goodsDetail.scss" lang="scss"></style>
<style scoped lang="scss">
	/deep/.rich-box image,
	.rich-box p,
	.rich-box div {
		width: 100%;
	}

	/deep/ .rich-box img,
	.rich-box p,
	.rich-box div {
		width: 100%;
	}
</style>
